<template>
  <Breadcrumb style="padding-bottom: 20px">
    <BreadcrumbItem to="/">图书管理后台</BreadcrumbItem>
    <BreadcrumbItem>用户信息</BreadcrumbItem>
  </Breadcrumb>
  <Form :model="personalForm" :label-width="80" style="width: 400px">
    <FormItem label="用户名:">
      <Input v-model="personalForm.username" readonly></Input>
    </FormItem>
    <FormItem label="密码:">
      <Input type="password" v-model="personalForm.password" readonly></Input>
    </FormItem>
    <FormItem>
      <Button @click="update()" type="primary">修改密码</Button>
      <Button @click="cancel()" style="margin-left: 8px">退出</Button>
    </FormItem>
  </Form>
  <Modal v-model="modal" title="修改密码" :footer-hide="true">
    <Form ref="updateForm" :model="updateForm" :label-width="100" style="width: 400px">
      <FormItem label="用户名:" prop="username">
        <Input v-model="updateForm.username" readonly></Input>
      </FormItem>
      <FormItem label="新密码:" prop="password">
        <Input type="password" v-model="updateForm.password"></Input>
      </FormItem>
      <FormItem label="再次输入:" prop="passwords">
        <Input type="password" v-model="updateForm.passwords"></Input>
      </FormItem>
      <FormItem>
        <Button @click="updatePassword()" type="primary">修改</Button>
        <Button @click="cancels()" style="margin-left: 8px">取消</Button>
      </FormItem>
    </Form>
  </Modal>
  <GlobalFooter :links="links" :copyright="copyright" />
</template>

<script>
import { getUsername, updateUsername } from '@/api/api';
export default {
  data() {
    return {
      modal: false,
      personalForm: {
        username: '',
        password: ''
      },
      updateForm: {
        username: '',
        password: '',
        passwords: ''
      },
      links: [
        {
          key: '帮助',
          title: '帮助',
          href: 'https://www.iviewui.com',
          blankTarget: true
        },
        {
          key: 'github',
          icon: 'logo-github',
          href: 'https://github.com/view-design/ViewUIPlus',
          blankTarget: true
        },
        {
          key: '条款',
          title: '条款',
          href: '',
          blankTarget: true
        }
      ],
      copyright: 'Copyright © 2022 View Design All Rights Reserved'
    };
  },
  methods: {
    update() {
      this.modal = true;
      this.updateForm.username = localStorage.getItem('username');
    },
    cancel() {
      this.$Modal.confirm({
        title: '退出',
        content: '<p>您确认要退出吗?</p>',
        onOk: () => {
          localStorage.removeItem('username');
          this.$router.push({
            name: 'login'
          });
        },
        onCancel: () => {
          this.$Message.info('用户取消退出');
        }
      });
    },
    cancels() {
      this.modal = false;
    },
    updatePassword() {
      if (
        this.updateForm.password == '' ||
        this.updateForm.passwords == '' ||
        this.updateForm.password != this.updateForm.passwords
      ) {
        this.$Message.info('请输入密码或两次密码不一致');
      } else {
        updateUsername(this.updateForm).then((res) => {
          this.$Message.success('修改成功');
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        });
      }
    }
  },
  created() {
    getUsername({ username: localStorage.getItem('username') }).then((res) => {
      this.personalForm = res[0];
    });
  }
};
</script>
